<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>BZY-BOOK</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">BZY-BOOK</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-this"><a href="">首页</a></li>
        </ul>
        <ul id="login-menu" class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:void(0);" onclick="openLogin()">
                    <i class="layui-icon layui-icon-username"></i> 登录
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:void(0);" onclick="openRegister()">
                    <i class="layui-icon layui-icon-auz"></i> 注册
                </a>
            </li>
        </ul>
        <ul id="user-menu" class="layui-nav layui-layout-right layui-hide">
            <li class="layui-nav-item">
                <a href="">我的借阅<span class="layui-badge">9</span></a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-this" style="text-align:center"><a href="">编程语言</a></li>
                <li class="layui-nav-item" style="text-align:center"><a href="">办公软件</a></li>
                <li class="layui-nav-item" style="text-align:center"><a href="">人工智能</a></li>
                <li class="layui-nav-item" style="text-align:center"><a href="">操作系统</a></li>
                <li class="layui-nav-item" style="text-align:center"><a href="">数据库</a></li>
            </ul>
        </div>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body">
        <form class="layui-form" style="padding:20px 20px 5px 35px">
            <div class="layui-inline">
                <label class="layui-input-label">图书名称：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="product_name" style="height:30px" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline" style="padding-left:20px">
                <label class="layui-input-label">图书作者：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="product_name" style="height:30px" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline" style="padding-left:20px">
                <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-submit>
                    <i class="layui-icon layui-icon-search"></i>搜索图书
                </button>
            </div>
        </form>

        <hr>
        <div align="center">
            <#list bookPage.dataList as b>
            <#--行首-->
                <#if b_index % 4 == 0>
                    <div class="layui-row layui-col-space1" style="padding-top:20px">
                </#if>

                <div class="layui-col-md3">
                    <#list  b.bookInfo as info>
                        <img src="${info.images}" style="width:200px;height:200px">
                        <div style="padding:10px 20px 5px 35px" >
                            <p>${info.name}</p>
                            <p>价格：<span style="color:red">￥9.99</span></p>
                        </div>

                        <button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
                            <i class="layui-icon layui-icon-cart-simple"></i>借阅
                        </button>
                    </#list>

                </div>

            <#--行尾-->
                <#if b_index % 4 == 3 || b_has_next == false>
                    </div>
                </#if>
            </#list>
        </div>


        <div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
    </div>

    <!-- 底部固定区域 -->
    <div class="layui-footer" style="text-align:center">
        ©www.jwkt.net 版权所有
    </div>

    <!-- 登录表单 -->
    <div id="login-layer" style="display: none">
        <form id="login-form" class="layui-form" style="padding:45px 20px 5px 20px">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <input type="text" name="title" class="layui-input" id="username" style="width:80%">
                </div>
                <div id="msg" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密　码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" class="layui-input" style="width:80%">
                </div>
                <div id="msg" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
        </form>
    </div>

    <!-- 注册表单 -->
    <div id="register-layer" style="display: none">
        <form id="register-form" class="layui-form" style="padding:45px 20px 5px 20px">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" class="layui-input" id="username" style="width:80%">
                </div>
                <div id="msg-1" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密　码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" class="layui-input" style="width:80%">
                </div>
                <div id="msg-2" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓　名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" style="width:80%">
                </div>
                <div id="msg-3" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电　话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-input" style="width:80%">
                </div>
                <div id="msg-4" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地　址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" class="layui-input" style="width:80%">
                </div>
                <div id="msg-5" class="layui-hide">
                    <label class="layui-form-label" style="color:red">错　误</label>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../layui/js/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form', 'laypage', 'layer'], function(){
        var element = layui.element,
            laypage = layui.laypage,
            form = layui.form,
            layer = layui.layer;

        laypage.render({
            elem: 'pagination',
            count: 50,
            limit: 12,
            curr: 2
        });
    });

    function openLogin() {
        layer.open({
            type: 1,
            title: "用户登录",
            area: ['500px', '270px'],
            btnAlign: 'c',
            btn: ['登录', '取消'],
            yes: function(index, layero){
                $("#login-menu").addClass("layui-hide");
                $("#user-menu").removeClass("layui-hide");
            },
            btn2: function(index, layero){
                return true;
            },
            content: $("#login-layer")
        });
    }

    function openRegister() {
        layer.open({
            type: 1,
            title: "用户注册",
            area: ['500px', '420px'],
            btnAlign: 'c',
            btn: ['注册', '取消'],
            yes: function(index, layero){
                //alert($("#register-form").serialize());

                $("#msg-1").removeClass("layui-hide");
                layer.style(index, {height: "460px"});
            },
            btn2: function(index, layero){
                return true;
            },
            content: $("#register-layer")
        });
    }
</script>


</body>



</html>